<template>
  <div class="header">
    <div class="left"><span class="iconfont iconfanhui"></span></div>
    <div class="center bd-rs">
      <span class="iconfont iconsousuo"></span>
      搜索健身房/健身知识等
    </div>
    <router-link to="/city">
      <div class="right">{{ citys }}<span class="iconfont iconjiantouarrow486"></span></div>
    </router-link>
  </div>
</template>

<script>
  import BMap from 'BMap'
  import { mapState } from "vuex"
    export default {
      data() {
        return {
          location: null,
          citys: ''
        }
      },
      methods: {
        //定义方法
        getCity() {
            let _this = this;
            var geolocation = new BMap.Geolocation();
            geolocation.getCurrentPosition(function (r) {
              const myGeo = new BMap.Geocoder();
              myGeo.getLocation(new BMap.Point(r.point.lng, r.point.lat), data => {
                _this.citys = data.addressComponents.city.replace('市', '')
              })
            })
          }
      },
      //mounted中引用
      mounted() {
        this.getCity();
      },
      computed:{
        ...mapState(["city"])
      }
    }
</script>

<style scoped lang="stylus">
  @import "~css/common.styl"
  a
    color: #fff
  .header{
    line-height: .88rem;
    background: $bgColor;
    display flex;
    font-size: .28rem;
    color: #ffffff;
  }
  .left {
    margin: 0 .2rem;
  }
  .center {
    flex: 1;
    background: #fff;
    line-height: .66rem;
    height: .66rem;
    padding: 0 .14rem;
    margin-top: .12rem;
    text-align: center;
    color: #999999;
  }
  .right {
    margin: 0 .2rem;
  }
</style>
